<template>
	<div class="box">
		<p>
			<input type="text" placeholder="用户名" v-model="state.user"/>
		</p>
		<p>
			<input type="password" placeholder="密码" v-model="state.pwd"/>
		</p>
		<p>
			<select v-model="state.role">
				<option :value="ele.value" v-for="ele in state.roleList" :key="ele.value">{{ ele.text }}</option>
			</select>

		</p>
		<p>
			<input type="button" value="登录" @click="doLogin"/>
		</p>
	</div>
</template>

<script setup>

import {reactive} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router"
import {login} from "@/request/api";

const store = useStore();
const router = useRouter()
const state = reactive({
	user: 'adel',
	pwd: '12345678',
	role: 'boss',
	id: '',
	work: [],
	permission:[],
	roleList: [
		{text: "老板", value: 'boss'},
		{text: "运维", value: 'runner'},
		{text: "维修", value: 'repair'}
	]
})

function doLogin(){

	const context = {
		role: state.role,
		user: state.user,
		id: state.id,
		work:state.work,
		permission:state.permission
	}
	login(state.user,state.pwd).then((res)=>{
		if(res.code === 200){
			//存储token
			localStorage.setItem('token',res.token)

			context.role = res.data.role
			context.work = res.data.work
			context.id = res.data.ID
			context.permission = res.data.permission

			console.log('login-context',context)
			//3.保存到vuex
			store.commit("login",context)

			//4.跳转后台
			//router.push(name:)
			router.push({path:"/"})
		}
		else{
			this.$message('登陆失败')
		}
	})
}

</script>

<style scoped>
.box{
	border: 1px solid #ddd;
	width: 300px;
	margin-top: 300px;
	/*左右居中*/
	margin-left: auto;
	margin-right: auto;
	padding: 30px;
}
</style>